<template>
  <div class="container" :style="'height: '+docheight+'px'">
      <leftcont></leftcont>
      <div class="righCont">
          <topcont></topcont>
          <div class="content">
              <div class="setCont">
                <div class="mainTop">
                  <div class="mainTitle">编辑教师</div>
                  <btn value="返回列表" @click="backfn"></btn>
                </div>
                <div class="formCont" v-if="showData">
                  <el-form :model="userInfo" ref="userInfo" :rules="rules" label-width="120px">
                    <el-form-item label="教师头像">
                      <cropperCom @successCropper="getHeadImg" :propImg="userInfo.teacher_head_img"></cropperCom>
                    </el-form-item>
                    <el-form-item label="教师昵称" prop="teacher_nick_name">
                      <el-input v-model="userInfo.teacher_nick_name"></el-input>
                    </el-form-item>
                    <el-form-item label="微信号" prop="teacher_wechat">
                      <el-input v-model="userInfo.teacher_wechat"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" prop="teacher_mobile">
                      <el-input :maxlength="11" v-model="userInfo.teacher_mobile"></el-input>
                    </el-form-item>
                    <el-form-item label="毕业学院">
                      <el-input v-model="userInfo.graduation_institution"></el-input>
                    </el-form-item>
                    <el-form-item label="教师状态">
                        <el-radio v-model="userInfo.education" label="大专">大专</el-radio>
                        <el-radio v-model="userInfo.education" label="本科">本科</el-radio>
                        <el-radio v-model="userInfo.education" label="研究生">研究生</el-radio>
                      </el-form-item>
                    <el-form-item label="授课经验">
                      <el-input v-model="userInfo.teacher_years"></el-input>
                    </el-form-item>
                    <el-form-item label="教师状态">
                      <el-radio v-model="userInfo.teacher_status" :label="1">正常</el-radio>
                      <el-radio v-model="userInfo.teacher_status" :label="2">禁用</el-radio>
                    </el-form-item>
                    <el-form-item label="关联课程">
                      <div class="cateBox">
                          <div :class="item.check?'cateItem cateActive':'cateItem'" :key="index" v-for="(item,index) in packArr">
                            <div class="packName">{{ item.course_name }}</div>
                            <div class="packType">
                              <el-radio :key="index2" v-for="(item2,index2) in item.course_rule" v-model="item.course_rule_name" :label="item2.rule_name">{{ item2.rule_name }}</el-radio>
                            </div>
                            <div :class="item.check?'saveBtn isActiveBtn':'saveBtn'" @click="chckCateFn(item)">{{ item.check?'取消关联':'关联此课程' }}</div>
                          </div>
                      </div>
                    </el-form-item>
                    <el-form-item label="教师姓名" prop="teacher_name">
                      <el-input v-model="userInfo.teacher_name"></el-input>
                    </el-form-item>
                    <el-form-item label="身份证号" prop="teacher_idcard">
                      <el-input :maxlength="18" v-model="userInfo.teacher_idcard"></el-input>
                    </el-form-item>
                    <el-form-item label="保证金" prop="earnest_money">
                      <el-input :maxlength="5" v-model="userInfo.earnest_money"></el-input>
                    </el-form-item>
                    <el-form-item label="教师描述" prop="teacher_introduce">
                      <el-input type="textarea"
                          :autosize="{ minRows: 2, maxRows: 4}"
                          v-model="userInfo.teacher_introduce">
                      </el-input>
                    </el-form-item>
                    <el-form-item label="成功案例">
                      <btn value="+新增成功案例" @click="addSuccItemFn"></btn>
                    </el-form-item>
                    <el-form-item label=" ">
                      <div class="contentItem" :key="index" v-for="(item,index) in userInfo.case">
                        <el-input v-model="item.name" placeholder="请输入成功案例"></el-input>
                          <el-button class="delBtn" type="danger" @click="delSuccFn(index)" plain>删除</el-button>
                      </div>
                    </el-form-item>
                    <el-form-item label="所获荣誉">
                      <btn value="+新增所获荣誉" @click="addGreadItemFn"></btn>
                    </el-form-item>
                    <el-form-item label=" ">
                      <div class="contentItem" :key="index" v-for="(item,index) in userInfo.honor">
                        <el-input v-model="item.name" placeholder="请输入所获荣誉"></el-input>
                          <el-button class="delBtn" type="danger" @click="delGreadFn(index)" plain>删除</el-button>
                      </div>
                    </el-form-item>
                    <el-form-item label="教学经历">
                      <btn value="+新增教学经历" @click="addLeaveItemFn"></btn>
                    </el-form-item>
                    <el-form-item label=" ">
                      <div class="contentItem" :key="index" v-for="(item,index) in userInfo.experience">
                        <el-input v-model="item.name" placeholder="请输入教学经历"></el-input>
                          <el-button class="delBtn" type="danger" @click="delLeaveFn(index)" plain>删除</el-button>
                      </div>
                    </el-form-item>
                    <el-form-item label="证书资质" prop="technician_introduce">
                      <def-up-img-more :propImg="detailImgList" @successUpImg="getDetailImg"></def-up-img-more>
                    </el-form-item>
                    <el-form-item label="">
                      <btn value="保存" @click="saveFn"></btn>
                    </el-form-item>
                  </el-form>
                </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import leftcont from '@/components/leftCont.vue'
import topcont from '@/components/topCont.vue'
import btn from '@/components/public/btn.vue'
import defUpImgMore from '@/components/public/defUpImgMore.vue'
import { operateSave,checkPackage,editShowTech} from '@/http/api'
import cropperCom from '@/components/public/cropperCom.vue'

  export default {
    components: {cropperCom,leftcont,topcont,btn,defUpImgMore},
    data() {
      var checkName = (rule, value, callback) => {
          if (value=='') {
              return callback(new Error('请输入教师名称'));
          }else{
              return callback()
          }
      };
      var checkteacher_introduce = (rule, value, callback) => {
          if (value=='') {
              return callback(new Error('请输入教师描述'));
          }else{
              return callback()
          }
      };
      var checkNickName = (rule, value, callback) => {
          if (value=='') {
              return callback(new Error('请输入教师昵称'));
          }else{
              return callback()
          }
      };
      var check_teacher_wechat = (rule, value, callback) => {
          if (value=='') {
              return callback(new Error('请输入微信号'));
          }else{
              return callback()
          }
      };
      var check_teacher_mobile = (rule, value, callback) => {
          if (value=='') {
              return callback(new Error('请输入手机号'));
          }else if(!this.$converData.checkPhone(value)){
            return callback(new Error('手机号格式有误'));
          }else{
              return callback()
          }
      };
      var check_teacher_idcard = (rule, value, callback) => {
          if (value=='') {
              return callback(new Error('请输入身份证号'));
          }else if(value.length!=18){
            return callback(new Error('身份证号必须为18位数'));
          } else{
              return callback()
          }
      };
      var check_earnest_money = (rule, value, callback) => {
          if (value=='') {
              return callback(new Error('请输入保证金'));
          } else{
              return callback()
          }
      };
      
      return {
          packArr:[],
          showData:false,
          userInfo:{
            teacher_head_img:'',
            teacher_name:'',
            teacher_introduce:'',
            teacher_nick_name:'',
            teacher_wechat:'',
            teacher_mobile:'',
            education:'',
            graduation_institution:'',
            teacher_years:'',
            teacher_status:1,
            teacher_course:[],
            teacher_idcard:'',
            earnest_money:'',
            case:[
              {name:''}
            ],
            honor:[
              {name:''}
            ],
            experience:[
              {name:''}
            ],
            qualifications:'',
          },
          detailImgList:[],
          
          techTime:[new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
          rules: {
              teacher_name: [
                  { validator: checkName,required: true,trigger: 'blur' }
              ],
              teacher_introduce:[
                  { validator: checkteacher_introduce,required: true,trigger: 'blur' }
              ],
              teacher_nick_name:[
                  { validator: checkNickName,required: true,trigger: 'blur' }
              ],
              teacher_wechat:[
                { validator: check_teacher_wechat,required: true,trigger: 'blur' }
              ],
              teacher_mobile:[
                { validator: check_teacher_mobile,required: true,trigger: 'blur' }
              ],
              teacher_idcard:[
                { validator: check_teacher_idcard,required: true,trigger: 'blur' }
              ],
              earnest_money:[
                { validator: check_earnest_money,required: true,trigger: 'blur' }
              ],
              
          }
      }
    },
    props: {},
    methods:{
      backfn(){
        this.$router.back()
      },
      delSuccFn(i){
        this.userInfo.case.splice(i, 1)
      },
      addSuccItemFn(){
        this.userInfo.case.push({name:'',})
      },
      delGreadFn(i){
        this.userInfo.honor.splice(i, 1)
      },
      addGreadItemFn(){
        this.userInfo.honor.push({name:'',})
      },
      delLeaveFn(i){
        this.userInfo.experience.splice(i, 1)
      },
      addLeaveItemFn(){
        this.userInfo.experience.push({name:'',})
      },
      chckCateFn(item){
        item.check = !item.check
      },
      getHeadImg(src){
        this.userInfo.teacher_head_img = src
      },
      getPachStr(){
        let arr = []
        for(var i=0;i<this.packArr.length;i++){
          if(this.packArr[i].check){
            for(let k = 0;k<this.packArr[i].course_rule.length;k++){
              if(this.packArr[i].course_rule[k].rule_name==this.packArr[i].course_rule_name){
                console.log(i)
                arr.push({course_rule_name:this.packArr[i].course_rule_name,course_id:this.packArr[i].family_course_id})
              }
            }
          }
        }
        return arr
      },
      getDetailImg(arr){
          if(arr.length>0){
              let newArr = []
              for(let i = 0; i < arr.length; i++){
                  newArr.push(arr[i].img)
              }
              this.userInfo.qualifications = newArr.join(',')
          }else{
              this.userInfo.qualifications = ''
          }
      },
      saveFn(){
        let packArr = this.getPachStr()
        if(packArr.length==0){
          this.$message('请选择关联课程')
          return false
        }
        this.userInfo.teacher_course = packArr
          this.$refs['userInfo'].validate((valid) => {
              if (valid) {
                this.Submit()
              } else {
                  return false;
              }
          })
      },
      Submit(){
        let data = this.userInfo
        let loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.7)'
        });
        operateSave(data).then((res) => {
          if(res.data.code==1){
            this.$message({
              message: '编辑成功',
              type: 'success'
            });
            setTimeout(() => {
              this.$router.back()
            }, 1500);
          }else{
            this.$message(res.data.msg)
          }
          loading.close();
        }).catch(()=>{
          loading.close();
          this.$message('网络请求超时');
        })
      },
      getPack(arr){
        
        var data ={
        }
        checkPackage(data).then((res)=>{
          if(res.data.code==1){
            for(let i  = 0; i < res.data.data.length; i++){
              res.data.data[i]['check'] = false
              res.data.data[i]['course_rule_name'] = '普通教师'
              if(arr.length>0){
                for(let k = 0;k<arr.length;k++){
                  if(arr[k].course_id==res.data.data[i].family_course_id){
                    res.data.data[i]['check'] = true
                    res.data.data[i]['course_rule_name'] = arr[k].course_rule_name
                  }
                }
              }
            }
            this.packArr = res.data.data //把最新的数组赋值给tableData
            console.log(this.packArr)
          }else{
            this.$message(res.data.msg)
          }
          this.showData = true
        }).catch((err)=>{
          this.$message('服务器请求超时');
        })
      },
      getData(){
            let data ={
                teacher_id:this.$route.query.id
            }
            editShowTech(data).then((res) => {
                if(res.data.code==1){
                    let resData = res.data.data
                    let arr = resData.qualifications
                    this.detailImgList = []
                    if(arr.length>0){
                      for(let i = 0; i < arr.length; i++){
                          this.detailImgList.push({img: arr[i]})
                      }
                    }

                    this.userInfo = {
                        teacher_id:this.$route.query.id,
                        teacher_head_img:resData.teacher_head_img,
                        teacher_name:resData.teacher_name,
                        teacher_introduce:resData.teacher_introduce,
                        teacher_nick_name:resData.teacher_nick_name,
                        teacher_wechat:resData.teacher_wechat,
                        teacher_mobile:resData.teacher_mobile,
                        education:resData.education,
                        graduation_institution:resData.graduation_institution,
                        teacher_years:resData.teacher_years,
                        teacher_status:resData.teacher_status,
                        teacher_course:resData.teacher_course,
                        teacher_idcard:resData.teacher_idcard,
                        earnest_money:resData.earnest_money,
                        case:resData.case,
                        honor:resData.honor,
                        experience:resData.experience,
                        qualifications:resData.qualifications,
                    }
                    this.getPack(resData.teacher_course)
                }else{
                    this.$message(res.data.msg)
                }
            }).catch((err)=>{
              console.log(err)
            this.$message('网络请求超时');
          })
        }
    },
    mounted(){
    },
    created() {
      this.getData()
    },
  }
</script>

<style scoped lang="less">
.container{
  width: 100%;
  display: flex;
  overflow: hidden;
  .righCont{
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-left: 15px;
    height: 100%;
    width: 10px;
    background-color: #F4F8FF;
    .content{
      padding: 20px;
      box-sizing: border-box;
      width: 100%;
      flex: 1;
      overflow: auto;
      .setCont{
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        background-color: #fff;
        .mainTop{
          display: flex;
          margin-bottom: 25px;
          align-items: center;
          justify-content: space-between;
          .mainTitle{
            font-size: 14px;
            font-weight: bold;
          }
        }
        .formCont{
          width: 700px;
          .contentItem{
            display: flex;
            padding: 15px;
            box-sizing: border-box;
            background-color: #f7f7f7;
            border-radius: 5px;
            align-items: center;
            margin-bottom: 10px;
            .priceTr{
              margin-bottom: 10px;
            }
            .delBtn{
              margin-left: 15px;
              width: 100px;
            }
          }
          .noFlex{
            display: block;
            .delBtn{
              margin-left: 0;
            }
          }
          .cateBox{
              width: 100%;
              display: flex;
              flex-wrap: wrap;
              align-items: center;
              justify-content: space-between;
              padding-top: 5px;
              .cateItem{
                  width: 48%;
                  line-height: 32px;
                  box-sizing: border-box;
                  border-radius: 5px;
                  padding: 20px;
                  margin-bottom: 15px;
                  background-color: #f7f7f7;
                  color: #666;
                  cursor: pointer;
                  .packName{
                    color: #000;
                    font-weight: bold;
                  }
                  .packType{
                    margin-bottom: 10px;
                  }
                  .saveBtn{
                      background-color: #916ce0;
                      color: #fff;
                      width: 100%;
                      padding: 5px 0;
                      font-size: 12px;
                      border-radius: 0.25rem;
                      box-sizing: border-box;
                      text-align: center;
                    }
                    .isActiveBtn{
                      background-color: #fff;
                      color: #916ce0;
                    }
              }
              .cateActive{
                background-color: #e8def8;
                color: white;
              }
          }
        }
      }
    }
  }
}
</style>
<style>
.el-collapse-item__wrap{
  border-bottom: none;
}
.el-collapse{
  border-top: none;
  border-bottom: none;
}
.content { overflow: -moz-scrollbars-none; }
.content::-webkit-scrollbar { width: 0 !important }
.content { -ms-overflow-style: none; }

</style>
<style>
.formImg .el-form-item__content{
line-height: normal !important;;
}
</style>